<template>
	<view class="trashChange">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="top-session">
			<view class="device-num">
				<view class="name"><text style="color: #fff;">*</text>设施编号</view>
				<view class="val"><input disabled type="text" v-model="params.devicecode" /></view>
			</view>
			<view class="device-name">
				<view class="name"><text style="color: #fff;">*</text>设施名称</view>
				<view class="val"><input change type="text" disabled v-model="params.devicename" /></view>
			</view>
			<!-- <view class="detail">
				注：以环评审批环保设施、提升治理方案要求、排污许可证设施名称为准
			</view> -->
		</view>
		<view class="session-bgc">
			<view class="bgc-color">
				<view class="select-item">
					<view class="left">
						<text>*</text>
						<view class="name" style="font-size: 31rpx;color: #000;font-weight: 400;">涉废类型</view>
					</view>
					<view class="val">
						<div class="ipt" style="width: 366rpx;">
							<uni-data-select style="width: 100%;" v-model="params.wastetype" :localdata="adviceTypeList"
								placeholder="请选择涉废类型" pl></uni-data-select>
						</div>
						<button>
							<image style="width: 22rpx;height: 22rpx;"
								src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/plus-icon.png"
								mode=""></image>
						</button>

					</view>
				</view>
				<view class="ipt-item sel-item">
					<view class="name">
						<text>*</text>
						<view class="name">涉废代码</view>
					</view>
					<view class="val" style="padding: 0;width: 455rpx;">
						<uni-data-select style="width: 100%;padding: 0;" v-model="params.wastecode"
							:localdata="wasteCodeList" placeholder="请选择危废代码" pl></uni-data-select>
					</view>
				</view>
				<view class="ipt-item">
					<view class="name">
						<text>*</text>
						<view class="name">本次更换量(kg)</view>
					</view>
					<view class="val">
						<input type="text" style="font-size: 26rpx;font-weight: 400;color: #333;"
							placeholder-class="place-class" v-model="params.putoutnum" placeholder="请输入本次更换量(kg)" />
					</view>
				</view>
				<view class="ipt-item sel-item">
					<view class="name">
						<text>*</text>
						<view class="name">本次填充量(kg)</view>
					</view>
					<view class="val">
						<input style="padding-left: 20rpx;font-size: 26rpx;font-weight: 400;color: #333;" type="text"
							placeholder-class="place-class" v-model="params.putinnum" placeholder="请输入本次填充量(kg)" />
						<!-- <uni-data-select style="width: 100%;" :localdata="range" placeholder=""
							pl></uni-data-select> -->
					</view>
				</view>
				<view class="ipt-item sel-item">
					<view class="name">
						<text>*</text>
						<view class="name">碘值</view>
					</view>
					<view class="val">
						<!-- 	<uni-data-select style="width: 100%;" :localdata="range" placeholder="请选择碘值"
							pl></uni-data-select> -->
						<input type="text" style="padding-left: 20rpx;font-size: 26rpx;font-weight: 400;color: #333;"
							placeholder-class="place-class" v-model="params.dianval" placeholder="请输入碘值" />
					</view>
				</view>
				<view class="ipt-item sel-item">
					<view class="name">
						<text>*</text>
						<view class="name">使用周期</view>
					</view>
					<view class="val"
						style="position:relative;align-content: center;padding-left: 30rpx;font-size: 26rpx;"
						@click="mask=true">
						{{params.circledays || '请选择'}}
						<!-- <uni-data-select style="width: 100%;" :localdata="range" placeholder="请选择使用周期"
							pl></uni-data-select> -->

						<button
							style="background-color:#0874FA;width: 81rpx;height: 60rpx;position:absolute; #0874FA;border-radius: 7rpx;border: 1px solid #BFBFBF;display: flex;justify-content: center;align-items: center;align-self: flex-end;right:-2rpx;transform: translateY(-50%);top:50%">
							<image style="width: 43rpx;height: 44rpx;" src="../../static/upload-plus-icon.png" mode="">
							</image>
						</button>
					</view>

				</view>
				<view class="ipt-item sel-item">
					<view class="name">
						<text>*</text>
						<view class="name">预计下次更换时间</view>
					</view>
					<view class="val">
						<uni-datetime-picker type="date" disabled :clear-icon="false" v-model="params.nextchangedate" />
					</view>
				</view>
			</view>
		</view>
		<view class="btm-wrap">
			<view class="update-date">
				<view class="name">
					<text>*</text>
					<view class="name">本次更换时间</view>
				</view>
				<view class="val" style="padding-left: 12rpx;width:452rpx">
					<uni-datetime-picker type="date" disabled :clear-icon="false" v-model="params.commitdate" />
				</view>
			</view>
			<view class="pre-change-img">
				<view class="name">
					<text>*</text>
					<view class="name">更换前图片</view>
				</view>
				<view class="img-wrap">
					<view class="add-img" @click="uploadPreImage">
						<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/upload-photo.png"
							mode=""></image>
						<text>（最多三张）</text>
					</view>
					<view class="add-img add-img-new" v-for="item,index in preImage" :key="index">
						<image :src="item" style="width: 100%;height:100%" mode=""></image>
						<view class="dele-img" @click="delePreImage(index)">
							✕
						</view>
					</view>

				</view>
			</view>
			<view class="pre-change-img">
				<view class="name">
					<text>*</text>
					<view class="name">更换中图片</view>
				</view>
				<view class="img-wrap">
					<view class="add-img" @click="addPaddingImage">
						<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/upload-photo.png"
							mode=""></image>
						<text>（最多三张）</text>
					</view>
					<view class="add-img add-img-new" v-for="item,index in changePaddingImage" :key="index">
						<image :src="item" style="width: 100%;height:100%" mode=""></image>
						<view class="dele-img" @click="delePaddingImage(index)">
							✕
						</view>
					</view>

				</view>
			</view>
			<view class="pre-change-img">
				<view class="name">
					<text>*</text>
					<view class="name">更换后图片</view>
				</view>
				<view class="img-wrap">
					<view class="add-img" @click="addSufImage">
						<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/upload-photo.png"
							mode=""></image>
						<text>（最多三张）</text>
					</view>
					<view class="add-img add-img-new" v-for="item,index in sufImage" :key="index">
						<image :src="item" style="width: 100%;height:100%" mode=""></image>
						<view class="dele-img" @click="delSufImage(index)">
							✕
						</view>
					</view>
				</view>
			</view>
			<view class="pre-change-img">
				<view class="name">
					<text>*</text>
					<view class="name">碘值监测报告图片</view>
				</view>
				<view class="img-wrap">
					<view class="add-img" @click="addIodineImage">
						<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/upload-photo.png"
							mode=""></image>
						<text>（最多三张）</text>
					</view>
					<view class="add-img add-img-new" v-for="item,index in iodineImage" :key="index">
						<image :src="item" style="width: 100%;height:100%" mode=""></image>
						<view class="dele-img" @click="deleteIodine(index)">
							✕
						</view>
					</view>
				</view>
			</view>
			<view class="pre-change-img">
				<view class="name">
					<text>*</text>
					<view class="name">相关发票图片</view>
				</view>
				<view class="img-wrap">
					<view class="add-img" @click="addBillImage">
						<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/upload-photo.png"
							mode=""></image>
						<text>（最多三张）</text>
					</view>
					<view class="add-img add-img-new" v-for="item,index in billImage" :key="index">
						<image :src="item" style="width: 100%;height:100%" mode=""></image>
						<view class="dele-img" @click="deleteBillImage(index)">
							✕
						</view>
					</view>
				</view>
			</view>
			<view class="pre-change-img">
				<view class="name">
					<text>*</text>
					<view class="name">入库暂存照片</view>
				</view>
				<view class="img-wrap">
					<view class="add-img" @click="addPutStorage">
						<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/upload-photo.png"
							mode=""></image>
						<text>（最多三张）</text>
					</view>
					<view class="add-img add-img-new" v-for="item,index in putStorageImage" :key="index">
						<image :src="item" style="width: 100%;height:100%" mode=""></image>
						<view class="dele-img" @click="delPutStorage(index)">
							✕
						</view>
					</view>
				</view>
			</view>
			<view class="pre-change-img">
				<view class="name">
					<!-- <text>*</text> -->
					<view class="name">用电缴费单</view>
				</view>
				<view class="img-wrap">
					<view class="add-img" @click="addElectroImage">
						<image src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/upload-photo.png"
							mode=""></image>
						<text>（最多三张）</text>
					</view>
					<view class="add-img add-img-new" v-for="item,index in electroImage" :key="index">
						<image :src="item" style="width: 100%;height:100%" mode=""></image>
						<view class="dele-img" @click="delElectroImage(index)">
							✕
						</view>
					</view>
				</view>
			</view>
			<view class="pre-change-img">
				<view class="name">
					<text>*</text>
					<view class="name">相关条款</view>
				</view>

			</view>
			<view class="clause-one">
				<checkbox-group @change="checkboxChange1">
					<label>
						<checkbox class="size" :value="radio1" />
						<text style="margin-left: 30rpx;">一般废物、危险废物按照相关的法律法规分类处置。</text>
					</label>


				</checkbox-group>
			</view>
			<view class="clause-two">
				<checkbox-group @change="checkboxChange2">
					<label style="display: flex;height: 50rpx;align-items: center;">
						<checkbox class="size" :value="radio2" />

						<view style="margin-left: 30rpx;">本次上传信息保证真实、有效、规范，符合危险废物相关管 理要求，不涉及非法信息以及本企业商业机密。</view>
					</label>
				</checkbox-group>
			</view>
			<view class="btn-wrap">
				<button @click="submit">提交</button>
			</view>
		</view>
		<view class="mask" v-if="mask">
			<view class="content-wrap">
				<view class="sel-raido" @click="current=1">
					<view :class="['circle',]">
						<view class="color" v-if="current==1"></view>
					</view>
					<text>90天</text>
				</view>
				<view class="sel-raido" @click="current=2">
					<view :class="['circle',]">
						<view class="color" v-if="current==2"></view>
					</view>
					<text>500小时</text>
				</view>
				<view class="hour-wrap" v-if="current==2">
					<view class="day">
						<text>月运行天数(天）</text>
						<input type="text" placeholder="请输入月运行天数(天）" v-model="timeParams.daypermonth"
							placeholder-class="mask-ipt" />
					</view>
					<view class="time"><text>t-运行时间(h/d)</text>
						<input type="text" placeholder="请输入每天运行时间" v-model="timeParams.hourperday"
							placeholder-class="mask-ipt" />
					</view>
				</view>
				<view class="sel-raido" @click="current=3">
					<view :class="['circle',]">
						<view class="color" v-if="current==3"></view>
					</view>
					<text>公式计算</text>
				</view>
				<view class="calc-wrap" v-if="current==3">
					<view class="meth">
						T&nbsp;=&nbsp;m&nbsp;×&nbsp;s&nbsp;÷&nbsp;(&nbsp;c&nbsp;×&nbsp;<text>10</text>&nbsp;&nbsp;&nbsp;×&nbsp;Q&nbsp;×&nbsp;t&nbsp;)
					</view>
					<view class="m">
						<text>m-活性炭用量(kg)</text>
						<input type="text" v-model="formulaCalc.m" placeholder="请输入活性炭用量"
							placeholder-class="mask-ipt" />
					</view>
					<view class="s">
						<text>s-动态吸附量(%)</text>
						<input type="text" v-model="formulaCalc.s" placeholder="请输入动态吸附量"
							placeholder-class="mask-ipt" />
					</view>
					<!-- 
					 上传图片-->
					<view class="image" v-if="formulaCalc.s>15">
						<text>活性炭性能证明</text>
						<view class="upload" @click="uploadImage">
							<image src="../../static/upload-image-icon.png" mode="" v-if="!formulaCalc.img"></image>
							<image style="width: 625rpx;height: 230rpx;" :src="formulaCalc.img" v-if="formulaCalc.img"
								mode=""></image>
							<view class="icon-wrap" v-if="!formulaCalc.img">
								<image src="../../static/upload-photo.png" mode=""></image>
								<text>点击上传</text>
							</view>
						</view>

					</view>
					<view class="c">
						<text>c-活性炭削减的 VOCs浓度(mg/m³)</text>
						<input type="text" v-model="formulaCalc.c" placeholder="请输入活性炭削减的VOCs浓度"
							placeholder-class="mask-ipt" />
					</view>
					<view class="q">
						<text>Q-风量(m³/h)</text>
						<input type="text" v-model="formulaCalc.Q" placeholder="请输入风量" placeholder-class="mask-ipt" />
					</view>
					<view class="t">
						<text>t-运行时间(h/d)</text>
						<input type="text" v-model="formulaCalc.t" placeholder="请输入每天运行时间"
							placeholder-class="mask-ipt" />
					</view>
					<view class="t">
						<text>月运行天数(天）</text>
						<input type="text" v-model="formulaCalc.daypermonth" placeholder="请输入月运行天数(天）"
							placeholder-class="mask-ipt" />
					</view>

				</view>
				<view class="btn-wrap">
					<button @click="save">确认</button>
				</view>
			</view>
			<button class="error" @click="mask=false">
				<image src="../../static/error.png" mode=""></image>
			</button>
		</view>
	</view>
</template>

<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index.js'
	import uploadFile from '../../request/uploadFile.js'
	import dayjs from 'dayjs'
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		reactive,
		ref,
		watch
	} from 'vue'
	let name = "耗材替换"
	let current = ref(0)
	let imgUrl = ref('')
	let timeParams = reactive({})
	let formulaCalc = reactive({
		s: '10'
	})
	let billImage = reactive([])
	/* 删除碘值图片 */

	let mask = ref(false)
	let adviceTypeList = ref([])
	let radioChange = (evt) => {
		for (let i = 0; i < items.value.length; i++) {
			if (items.value[i].value === evt.detail.value) {
				current.value = i
				break;
			}
		}
	}
	let radio1 = ref(false)
	let radio2 = ref(false)

	let putStorageImage = reactive([])
	let iodineImage = reactive([])
	let preImage = reactive([])
	let electroImage = reactive([])
	let sufImage = reactive([])
	let changePaddingImage = reactive([])
	let params = reactive({
		devicename: ''
	})
	watch(() => params.circledays, () => {

		params.nextchangedate = dayjs().add(params.circledays, 'day').format('YYYY-MM-DD')

	}, {
		deep: true
	})
	let save = () => {
		// params.circledays
		let type = 0
		if (current.value == 1) {
			params.circledays = 90
			params.circledaysimg = ''
			mask.value = false
			return
		} else if (current.value == 2) {
			type = 2

			http({
				url: "/circleDays/getCircleDays",
				data: {
					...timeParams,
					type
				}
			}).then((res) => {

				if (res.code == 0) {
					params.circledays = res.data
					params.circledaysimg = ''
					for (let key in formulaCalc) {
						delete formulaCalc[key]
					}

					mask.value = false
				}

			})
		} else if (current.value == 3) {
			type = 1

			http({
				url: "/circleDays/getCircleDays",
				data: {
					...formulaCalc,
					type
				}
			}).then((res) => {
				if (res.code == 0) {
					params.circledays = res.data
					for (let key in timeParams) {
						delete timeParams[key]
					}
					mask.value = false
				}

			})
		}


	}
	let wasteCodeList = ref([])
	onLoad((e) => {
		console.log(e, 'e');
		params.devicename = e.name || ''
		params.devicecode = e.code || ''
		http({
			url: '/device/getDetailByDeviceCode',
			data: {
				devicecode: e.code
			}
		}).then((res) => {
			console.log(res, 'res12');
			if (res.code == 0) {
				params.devicename = res.data.devicename
			}
		})
		params.commitdate = dayjs().format('YYYY-MM-DD')
	})
	let checkboxChange1 = (e) => {

		if (e.detail?.value[0]) {
			radio1.value = true
		} else {
			radio1.value = false
		}
	}
	let checkboxChange2 = (e) => {

		if (e.detail?.value[0]) {
			radio2.value = true
		} else {
			radio2.value = false
		}
	}
	let submit = () => {
		console.log(radio1.value, radio2.value);
		if (!radio1.value || !radio2.value) {
			uni.showToast({
				title: '请勾选相关条款',
				icon: 'error'
			})
			return
		}
		if (preImage.length == 0 || sufImage.length == 0 || changePaddingImage.length == 0 ||
			iodineImage.length == 0 || putStorageImage.length == 0 || billImage.length == 0
		) {

			uni.showToast({
				title: '请上传图片',
				icon: 'error'
			})
			return

		}
		if (!params.wastetype || !params.circledays || !params.wastecode || !params.dianval || !params.putoutnum || !
			params.putinnum) {
			uni.showToast({
				title: "请完整填写内容",
				icon: "none"
			})
			return
		}
		params.changebeforeimgurl = preImage.join(',')
		params.changemidimgurl = changePaddingImage.join(',')
		params.changeafterimgurl = sufImage.join(',')
		params.imgdianvalurl = iodineImage.join(',')
		params.imgticketurl = billImage.join(',')
		params.imgstockkeepurl = putStorageImage.join(',')
		params.imgpowerfeeurl = electroImage.join(',')
		// circledays
		http({
			url: '/stock/addOrUpdate',
			data: params
		}).then((res) => {

			if (res.code == 0) {
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				})
				preImage.length = 0
				changePaddingImage.length = 0
				sufImage.length = 0
				iodineImage.length = 0
				billImage.length = 0
				putStorageImage.length = 0
				electroImage.length = 0
				for (let key in params) {
					params[key] = ''
				}
			}
		})
	}
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
	let delElectroImage = (index) => {
		electroImage.splice(index, 1)

	}
	let addElectroImage = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 3,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths

				for (var i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						filePath: tempFilePaths[i]
					}).then((res) => {

						if (res.code == 0) {
							electroImage.push(res.data.url)
							if (electroImage.length > 3) {
								electroImage.shift()
							}
						}

					})
				}



			}
		});
	}
	/* 删除入库照片 */
	let delPutStorage = (index) => {
		putStorageImage.splice(index, 1)
	}
	/* 添加入库照片 */
	let addPutStorage = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 3,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths

				for (var i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						filePath: tempFilePaths[i]
					}).then((res) => {

						if (res.code == 0) {
							putStorageImage.push(res.data.url)
							if (putStorageImage.length > 3) {
								putStorageImage.shift()
							}
						}

					})
				}



			}
		});
	}
	/* 删除发票照片 */
	let deleteBillImage = (index) => {
		billImage.splice(index, 1)
	}
	/* 添加发票照片 */
	let addBillImage = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 3,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths

				for (var i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						filePath: tempFilePaths[i]
					}).then((res) => {

						if (res.code == 0) {
							billImage.push(res.data.url)
							if (billImage.length > 3) {
								billImage.shift()
							}
						}

					})
				}



			}
		});
	}
	/* 删除碘照片 */
	let deleteIodine = (index) => {
		iodineImage.splice(index, 1)

	}
	/* 添加碘值图片 */
	let addIodineImage = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 3,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths

				for (var i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						filePath: tempFilePaths[i]
					}).then((res) => {

						if (res.code == 0) {
							iodineImage.push(res.data.url)
							if (iodineImage.length > 3) {
								iodineImage.shift()
							}
						}

					})
				}



			}
		});
	}

	/* 添加跟换后 */
	let addSufImage = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 3,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths

				for (var i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						filePath: tempFilePaths[i]
					}).then((res) => {

						if (res.code == 0) {
							sufImage.push(res.data.url)
							if (sufImage.length > 3) {
								sufImage.shift()
							}
						}

					})
				}



			}
		});
	}
	/* 删除跟换后 */
	let delSufImage = (index) => {
		sufImage.splice(index, 1)
	}
	let maskClick = () => {}
	/* 添加跟换中 */
	let addPaddingImage = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 3,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths

				for (var i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						filePath: tempFilePaths[i]
					}).then((res) => {

						if (res.code == 0) {
							changePaddingImage.push(res.data.url)
							if (changePaddingImage.length > 3) {
								changePaddingImage.shift()
							}
						}

					})
				}



			}
		});
	}
	/* 删除跟换中 */
	let delePaddingImage = (index) => {
		changePaddingImage.splice(index, 1)
	}
	/* 删除跟换前 */
	let delePreImage = (index) => {
		preImage.splice(index, 1)
	}
	/* 跟换前 */
	let uploadPreImage = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 3,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths

				for (var i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						filePath: tempFilePaths[i]
					}).then((res) => {

						if (res.code == 0) {
							preImage.push(res.data.url)
							if (preImage.length > 3) {
								preImage.shift()
							}
						}

					})
				}



			}
		});
	}
	let uploadImage = () => {
		uni.chooseImage({
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			count: 1,
			success: function(res) {
				let tempFilePaths = res.tempFilePaths
				console.log(tempFilePaths, 'tempFilePaths');
				for (var i = 0; i < tempFilePaths.length; i++) {
					uploadFile({
						filePath: tempFilePaths[i]
					}).then((res) => {

						if (res.code == 0) {
							formulaCalc.img = res.data.url
							params.circledaysimg = res.data.url
							console.log(images, 'ss');
							// enterpriseMsg.authbook = res.data.url
						}

					})
				}



			}
		});
	}
	http({
		url: '/wasteCode/getListItems'
	}).then((res) => {
		if (res.code == 0) {
			wasteCodeList.value = res.data.map((item) => {
				return {
					text: item.wastecode + `(${item.wastetypename})`,
					value: item.wastecode
				}
			})
		}
	})
</script>

<style lang="scss" scoped>
	.size {
		scale: 0.8;
		width: 30rpx;
		height: 30rpx;



	}

	:deep(.mask-ipt) {
		width: 205rpx;
		height: 22rpx;

		font-weight: 400;
		font-size: 23rpx;
		color: #999999;

	}

	:deep(.uni-date) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date-editor) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date-x) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.uni-date-editor--x) {
		height: 100% !important;
		border: none !important;
	}

	:deep(.place-class) {

		font-weight: 400 !important;
		font-size: 24rpx !important;
		color: #999999 !important;

	}

	:deep(.uni-select) {
		border: none;
		width: 100% !important;

	}

	:deep(.uni-select__input-placeholder) {

		font-weight: 400;
		font-size: 24rpx;
		color: #999999;

	}

	.trashChange {
		width: 100vw;
		height: 100vh;
		padding-top: 160rpx;

		.mask {
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, 0.5);
			position: fixed;
			left: 0;
			top: 0;
			padding: 0 30rpx;
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;
			display: flex;
			flex-direction: column;
			overflow: scroll;

			.error {
				margin-top: 46rpx;

				image {
					width: 58rpx;
					height: 58rpx;
				}
			}

			.btn-wrap {
				margin-top: 45rpx;
				padding: 0 52rpx;

				button {
					width: 100%;
					height: 88rpx;
					background: #0874FA;
					border-radius: 44rpx;
					line-height: 88rpx;
					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;

				}
			}

			.calc-wrap {
				.meth {
					text-align: center;
					font-weight: bold;
					font-size: 30rpx;
					color: #333333;
					margin-top: 43rpx;
					margin-bottom: 50rpx;

					text {
						position: relative;
					}

					text::before {
						content: '-6';
						font-size: 20rpx;
						position: absolute;
						right: -20rpx;
						top: -2rpx;
					}
				}

				.s {
					margin-top: 18rpx;
				}


				.m,
				.s {
					padding-left: 34rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding-right: 35rpx;

					text {
						flex-shrink: 0;
						font-weight: 400;
						font-size: 28rpx;
						color: #333333;

					}

					input {
						width: 339rpx;
						height: 59rpx;
						background: #FFFFFF;
						border-radius: 7rpx;
						border: 1px solid #BFBFBF;
						padding-left: 20rpx;
					}
				}

				.c {

					line-height: 34rpx;
				}

				.c,
				.q,
				.t {
					display: flex;
					align-items: center;
					margin-top: 22rpx;
					padding-left: 32rpx;
					height: 65rpx;
					padding-right: 35rpx;
					justify-content: space-between;

					text {
						width: 258rpx;


						font-weight: 400;
						font-size: 28rpx;
						color: #333333;

					}

					input {
						padding-left: 20rpx;
						width: 339rpx;
						height: 59rpx;
						background: #FFFFFF;
						border-radius: 7rpx;
						border: 1px solid #BFBFBF;
					}
				}

				.image {
					padding-left: 32rpx;
					margin-top: 25rpx;
					margin-bottom: 32rpx;

					text {}

					.upload {
						width: 625rpx;
						height: 230rpx;
						background-color: #F5F7F9;
						border-radius: 10rpx;
						display: flex;
						margin-top: 26rpx;
						align-items: center;
						flex-direction: column;
						justify-content: center;

						image {
							width: 78rpx;
							height: 65rpx;

						}

						.icon-wrap {
							margin-top: 28rpx;

							image {
								width: 30rpx;
								height: 25rpx;
							}

							text {
								margin-left: 16rpx;
								font-weight: 400;
								font-size: 25rpx;
								color: #333333;

							}
						}
					}
				}
			}

			.content-wrap {
				width: 100%;
				background: #FFFFFF;
				border-radius: 21rpx;
				padding-top: 46rpx;
				padding-bottom: 50rpx;

				.hour-wrap {
					display: flex;
					padding-left: 32rpx;
					flex-direction: column;

					.day {
						margin-top: 36rpx;
					}

					.time {
						margin-top: 26rpx;
					}

					.day,
					.time {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding-right: 35rpx;

						text {

							height: 29rpx;

							font-weight: 400;
							font-size: 27rpx;
							color: #333333;

							flex-shrink: 0;
						}

						input {
							width: 369rpx;
							height: 59rpx;
							background: #FFFFFF;
							border-radius: 7rpx;
							border: 1px solid #BFBFBF;
							padding-left: 20rpx;


							font-weight: 400;
							font-size: 26rpx;
							color: #333333;

						}
					}

				}

				.sel-raido:first-child {
					margin-top: 0rpx !important;
				}

				.sel-raido {
					display: flex;
					align-items: center;
					margin-top: 55rpx;
					padding-left: 37rpx;

					.circle {
						width: 38rpx;
						height: 38rpx;
						background: #FFFFFF;
						border-radius: 50%;
						border: 2px solid #BFBFBF;
						display: flex;
						justify-content: center;
						align-items: center;

						.color {
							width: 22rpx;
							height: 22rpx;
							background: #0874FA;
							border-radius: 50%;
						}
					}



					text {

						margin-left: 18rpx;
						font-weight: 500;
						font-size: 35rpx;
						color: #333333;

					}
				}
			}
		}

		.title-bgc {
			background: #0874FA;
			height: 160rpx;
			width: 100vw;
			position: fixed;
			top: 0%;
			left: 0;
			z-index: 5;

		}

		.btm-wrap {
			.clause-two {
				display: flex;
				align-items: center;
				margin-top: 40rpx;
			}

			.btn-wrap {
				padding: 56rpx 39rpx 62rpx 39rpx;

				button {
					width: 100%;

					height: 88rpx;
					background: #0874FA;
					border-radius: 44rpx;

					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;
					line-height: 88rpx;

				}
			}

			.clause-one,
			.clause-two {
				padding-left: 28rpx;
				font-weight: 500;
				font-size: 24rpx;
				color: #3A3633;
				display: flex;
				align-items: center;

				.checkbox {
					width: 30rpx;
					height: 30rpx;
					background: #FFFFFF;
					border-radius: 7rpx;
					border: 1px solid #BFBFBF;
					flex-shrink: 0;
					margin-right: 15rpx;
				}

				text {
					margin-left: 15rpx;
				}
			}

			.pre-change-img {
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				padding: 0 28rpx;

				margin-top: 45rpx;
				margin-bottom: 39rpx;

				.name {
					font-weight: 400;
					font-size: 31rpx;
					color: #000;
					display: flex;

					text {
						color: #F82A24;

					}


				}

				.img-wrap {
					padding-left: 15rpx;
					display: flex;

					.add-img:first-child {
						margin-left: 0rpx;
					}

					.add-img-new {
						border: none !important;
					}

					.add-img {
						margin-top: 39rpx;
						width: 148rpx;
						height: 150rpx;
						background: #FFFFFF;
						border-radius: 7rpx;
						border: 2px dashed #BFBFBF;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						margin-left: 22rpx;
						position: relative;

						image {
							width: 40rpx;
							height: 35rpx;
						}

						text {
							margin-top: 11rpx;
							font-weight: 400;
							font-size: 15rpx;
							color: #999999;

						}

						.dele-img {
							width: 30rpx;
							height: 30rpx;
							background: #989A9E;
							position: absolute;
							border-radius: 50%;
							right: -15rpx;
							top: -15rpx;
							color: #FFFFFF;
							display: flex;
							font-size: 17rpx;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}

			.update-date {
				display: flex;
				justify-content: space-between;

				padding: 0 28rpx;
				align-items: center;
				margin-top: 31rpx;

				.name {
					font-weight: 400;
					font-size: 31rpx;
					color: #000;
					display: flex;

					text {
						color: #F82A24;
					}

					.name {}
				}

				.val {
					width: 469rpx;
					height: 59rpx;
					background: #FAFAFA;
					border-radius: 7rpx;
					border: 1px solid #BFBFBF;
				}
			}
		}

		.session-bgc {
			padding: 0 16rpx;

			.bgc-color {
				width: 100%;
				height: 699rpx;
				background: #F7F7F7;
				border: 1px solid #BFBFBF;
				padding: 0 11rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				// align-items: center;

				.ipt-item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.name {
						display: flex;
						font-weight: 400;
						font-size: 31rpx;
						color: #000000;
						width: 242rpx;


						text {
							color: #F82A24;
						}
					}

					.val {
						width: 469rpx;
						height: 59rpx;
						background: #FAFAFA;
						border-radius: 7rpx;
						border: 1px solid #BFBFBF;
						padding-left: 30rpx;

						input {
							width: 100%;
							height: 100%;

						}

						input::placeholder {

							font-weight: 400;
							font-size: 24rpx;
							color: #999999;

						}
					}
				}

				.sel-item {
					display: flex;
					align-items: center;

					.val {
						display: flex;
						align-items: center;
						padding-left: 12rpx;
					}
				}

				.select-item {
					display: flex;
					justify-content: space-between;
					align-items: center;


					.left {
						display: flex;

						text {
							color: #F82A24;
						}

						.name {
							width: 164rpx;
							height: 61rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							font-size: 30rpx;
							color: #000000;
							line-height: 61rpx;
						}
					}

					.val {
						display: flex;
						align-items: center;

						.ipt {
							display: flex;
							align-items: center;
							width: 381rpx;
							height: 59rpx;
							background: #FAFAFA;
							border-radius: 7rpx;
							padding-left: 10rpx;
							border: 1px solid #BFBFBF;


						}

						button {
							width: 82rpx;
							height: 59rpx;
							background: #0874FA;
							border-radius: 7rpx;
							margin-left: 7rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							color: #fff;
							font-size: 46rpx;
						}
					}
				}
			}
		}

		.top-session {
			padding: 0 28rpx 0 28rpx;
			margin-bottom: 36rpx;

			.detail {

				font-weight: 400;
				font-size: 19rpx;
				color: #FF0000;
				margin-top: 14rpx;
				text-align: right;
			}

			.device-num,
			.device-name {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 38rpx;

				.name {

					font-weight: 400;
					font-size: 31rpx;
					color: #000000;


					text {
						color: #F82A24;
					}
				}

				.val {
					width: 469rpx;
					height: 59rpx;
					background: #FAFAFA;
					border-radius: 7rpx;
					border: 1px solid #BFBFBF;
					padding-left: 30rpx;

					input {
						width: 100%;
						height: 100%;

						font-weight: 400;
						font-size: 26rpx;
						color: #333333;

					}
				}
			}
		}


	}
</style>